@import url("https://fonts.googleapis.com/css2?family=Cuprum:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import "tailwindcss";

@source "../../shared/src";
/* Custom Font - Red Hat Display */
/* Light 300 */
@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular 400 */
@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium 500 */
@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* SemiBold 600 */
@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold 700 */
@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ExtraBold 800 */
@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Black 900 */
@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Apply 0 letter spacing to Red Hat Display font */
* {
  letter-spacing: 0 !important;
}

.font-redhat,
[style*="Red Hat Display"] {
  letter-spacing: 0 !important;
}

/*
  ---break--- */
@plugin "tailwindcss-animate";
/*
  ---break--- */
@custom-variant dark (&:is(.dark *));

/* Safe area utilities for mobile devices with notches */
@layer utilities {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .pt-safe {
    padding-top: env(safe-area-inset-top);
  }
  .px-safe {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

.font-cuprum {
  font-family: "Cuprum", sans-serif;
}

.font-roboto {
  font-family: "Roboto", sans-serif;
}

.font-poppins {
  font-family: "Poppins", sans-serif;
}

.font-redhat {
  font-family: "Red Hat Display", sans-serif;
}

:root {
  font-family: "Red Hat Display", system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Theme Variables - Simplified with single data-theme switcher */
:root {
  /* Dark mode (default) */
  /* Backgrounds */
  --bg-primary: #171717;
  --bg-secondary: #1f1f1f;
  --bg-tertiary: #292929;
  --background: #0a0a0a;

  /* Text colors */
  --text-primary: #e4e4e7;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --place-holder: #fafafa;

  /* Borders & Inputs */
  --border-color: #27272a;
  --border: #27272a;
  --border-btn: #525252;
  --input: #262626;

  /* Foregrounds */
  --primary-foreground: #262626;
  --secondary-foreground: #fafafa;
  --muted-foreground: #a3a3a3;
  --foreground: #fafafa;

  /* Buttons */
  --button-bg: #ffffff;
  --button-text: #000000;
  --button-hover: #e5e5e5;
  --share-button: #222222;

  /* Accents & States */
  --accent-primary: #22c55e;
  --accent-hover: #16a34a;
  --error-color: #e24a24;
  --error-hover: #c73e1d;
  --error-bg: #1f1515;
  --warning-text: #fca5a5;

  /* Backward compatibility alias (typo fix) */
  --primaary-foreground: #1f1f1f;
}

:root[data-theme="light"] {
  /* Light mode overrides */
  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f1f1f1;
  --bg-tertiary: #e9ecef;
  --background: #ffffff;

  /* Text colors */
  --text-primary: #000000;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --place-holder: #ababab;

  /* Borders & Inputs */
  --border-color: #dee2e6;
  --border: #e5e5e5;
  --border-btn: #e5e5e5;
  --input: #e5e5e5;

  /* Foregrounds */
  --primary-foreground: #f5f5f5;
  --secondary-foreground: #0a0a0a;
  --muted-foreground: #737373;
  --foreground: #0a0a0a;

  /* Buttons */
  --button-bg: #000000;
  --button-text: #ffffff;
  --button-hover: #333333;
  --share-button: #ffffff;

  /* Accents & States */
  --accent-primary: #242454;
  --accent-hover: #2d2f5a;
  --error-color: #e24a24;
  --error-hover: #c73e1d;
  --error-bg: #fef2f2;
  --warning-text: #dc2626;

  /* Backward compatibility alias (typo fix) */
  --primaary-foreground: #f5f5f5;

  /* Special Cases FINAL */

  --caption-btn-slider: #2e610b;
  --x-btn-slider: #0a0a0a;
  --streamer-btn-slider: #0a0a0a;
  --merge-btn-slider: #8f2995;
}

/* Theme-aware search input */
.theme-search-input::placeholder {
  color: var(--place-holder);
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
